// import Child from './components/child'
// 父组件样式
// 1. 普通导入方式
// import './index.scss'
// 2. 样式模块导入方式
// import stys from './index.module.scss'
// console.log('css modules:', stys)
import { Table, Card } from 'antd'
import Ref from './components/存储值'

/**
 * 组件样式使用总结：
 * 1. 同名类名会互相覆盖
 * 2. 后导入的会覆盖先导入的样式（规则）
 * 怎么解决？=》css modules
 */

function Test() {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age'
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address'
    }
  ]

  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer']
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser']
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher']
    }
  ]
  return (
    <>
      <Ref />
      <Card title={<h2>列表</h2>}>
        {/* 卡片内容 */}
        <Table columns={columns} dataSource={data} />
      </Card>
    </>

    // <div className={stys['bd-weight']}>
    //   <h1 className={[stys.box, stys.bdBlue].join(' ')}>父组件</h1>
    //   <h2 className={`${stys.box} ${stys.bdBlue}`}>多个类名添加</h2>
    //   <h3 className="fontColor bdColor">没有改名的全局样式</h3>
    //   <hr />
    //   <Child />
    // </div>
  )
}

export default Test
